<template>
  <el-dialog :title="title" v-model="open" width="600px" v-if="open">
    <el-form ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">
      <el-row>
        <el-col :span="24" v-if="false">
          <el-form-item label="消息编号" prop="serialNo">
            <el-input
              disabled
              v-model="form.serialNo"
              placeholder="请输入消息编号"
              clearable
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发布日期" prop="sendTime">
            <el-date-picker
              v-model="form.psendTime"
              type="datetime"
              disabled
              placeholder="发布时间"
              format="YYYY-MM-DD hh:mm:ss"
              :style="{width: '100%'}"
              clearable
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="有效日期" prop="endTime">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              disabled
              placeholder="有效时间"
              format="YYYY/MM/DD hh:mm:ss"
              :style="{width: '100%'}"
              clearable
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="消息内容" prop="msgContent">
            <div v-html="form.msgContent" class="htmlBox"></div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="open= false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script>
//API接口
import api from "@/api";
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {
    formList: {
      type: Object,
      default() {
        return {};
      }
    },
    isType: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      //控制表单的显示与否
      open: false,
      title: "详情",
      form: {},
      rules: {},
      qmLabel: {},
      isShow: true
    };
  },
  computed: {
    ...mapGetters(["info"])
  },
  watch: {
    formList: {
      handler(newVal, oldVal) {
        this.form = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    //表单提交方法
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        var that = this;
        if (valid) {
          if (this.form.id != undefined) {
            api.sysSms
              .edit({ ...this.form })
              .then(res => {
                this.$emit("getList");
                this.open = false;
                this.$message.success(res.msg);
                this.resetForm();
              })
              .catch(err => {
                this.$message.error(err.msg);
              });
          } else {
            api.sysSms
              .add({ ...this.form })
              .then(res => {
                this.$emit("getList");
                this.open = false;
                this.$message.success(res.msg);
                this.resetForm();
              })
              .catch(err => {
                this.$message.error(err.msg);
              });
          }
        }
      });
    },
    //表单重置
    resetForm() {
      this.$refs["elForm"].resetFields();
    }
  }
};
</script>
<style scoped lang="less">
.el-upload__tip {
  line-height: 1.2;
}
/deep/.htmlBox{
  p{
    margin: 0;
  }
}
.headerTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  border-bottom: solid 2px #cacaca;
}
.editor {
  min-height: 300px !important;
}
</style>
